<template>
  <el-tag :type="face_">{{ value }}</el-tag>
</template>

<script lang="ts" setup>
  import { ElTag } from 'element-plus';
  import { computed } from 'vue';
  import { Face, findByIndex, Row, faces } from '../../elementui';
  import { Sensor } from '../../core';

  const props = defineProps<{
    value?: unknown;
    row?: Row;
    sensor?: Sensor;
    face?: Face;
  }>();

  const face_ = computed<Face>(() => {
    if (props.face) return props.face;
    if (typeof props.value === 'number' && !props.sensor) return faces[props.value] || '';
    if (!props.sensor || !props.row) return '';
    return findByIndex(faces, props.sensor, props.row);
  });
</script>

<style scoped></style>
